// 删除所有demo相关逻辑
// ... existing code ...

// 完全重写切换逻辑
let currentDemo = null;

// 事件绑定
document.querySelector('.demo-switcher').addEventListener('click', function(e) {
    const btn = e.target.closest('.switch-btn');
    console.log('点击按钮：', btn);
    if (btn) {
        switchDemo(btn.dataset.demo.toLowerCase()); // 统一转小写
    }
});

// 暴力事件绑定
document.body.addEventListener('click', function(e) {
    const btn = e.target.closest('.switch-btn');
    if (btn && btn.dataset.demo) {
        switchDemo(btn.dataset.demo);
        e.stopPropagation();
        e.preventDefault();
    }
}, true); // 使用捕获阶段

// 强制初始化
setTimeout(() => {
    switchDemo('nightmare');
    console.log('默认内容已加载');
}, 500);

// 添加样式强制注入逻辑
function forceStyles() {
    document.querySelectorAll('.demo-content').forEach(el => {
        el.style.cssText = `
            display: none !important;
            opacity: 0 !important;
            position: absolute !important;
            z-index: 1 !important;
        `;
    });
    
    const activeContent = document.querySelector('.demo-content.active');
    if(activeContent) {
        activeContent.style.cssText = `
            display: block !important;
            opacity: 1 !important;
            z-index: 2 !important;
        `;
    }
}

// 修改初始化逻辑
document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.demo-tab');
    const panes = document.querySelectorAll('.demo-pane');
    
    function switchDemo(demoId) {
        // 切换标签
        tabs.forEach(tab => {
            tab.classList.toggle('active', tab.dataset.demo === demoId);
        });
        
        // 切换内容
        panes.forEach(pane => {
            if(pane.dataset.demo === demoId) {
                pane.classList.add('active');
                setTimeout(() => pane.style.opacity = 1, 10);
            } else {
                pane.style.opacity = 0;
                setTimeout(() => pane.classList.remove('active'), 300);
            }
        });
    }
    
    // 事件委托
    document.querySelector('.demo-tabs').addEventListener('click', (e) => {
        const tab = e.target.closest('.demo-tab');
        if(tab && !tab.classList.contains('active')) {
            switchDemo(tab.dataset.demo);
        }
    });
    
    // 默认显示第一个
    switchDemo('nightmare');
});

// 添加视差效果
document.addEventListener('mousemove', (e) => {
    const x = (window.innerWidth - e.pageX) / 30;
    const y = (window.innerHeight - e.pageY) / 30;
    document.querySelectorAll('.card').forEach(card => {
        card.style.transform = `perspective(1000px) rotateX(${y}deg) rotateY(${-x}deg)`;
    });
});

// 视频加载状态
document.querySelectorAll('iframe').forEach(iframe => {
    iframe.addEventListener('load', () => {
        iframe.previousElementSibling.style.display = 'none';
    });
});

// 动态光标效果
document.addEventListener('mousemove', (e) => {
    const cards = document.querySelectorAll('.info-card, .video-container');
    cards.forEach(card => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        card.style.setProperty('--mouse-x', `${x}px`);
        card.style.setProperty('--mouse-y', `${y}px`);
    });
});

// 动态光效
const createLight = (x, y) => {
    const light = document.createElement('div');
    light.className = 'dynamic-light';
    light.style.left = `${x}px`;
    light.style.top = `${y}px`;
    document.body.appendChild(light);
    setTimeout(() => light.remove(), 1000);
}

document.addEventListener('click', (e) => {
    createLight(e.pageX, e.pageY);
});

// 添加滚动阴影效果
const infoColumn = document.querySelector('.info-column');

infoColumn.addEventListener('scroll', () => {
    const shadowOpacity = Math.min(infoColumn.scrollTop / 20, 0.2);
    infoColumn.style.boxShadow = `0 2px 8px rgba(0,0,0,${shadowOpacity})`;
});

// 修改导航切换逻辑
navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 移除所有section的active状态
        sections.forEach(section => {
            section.classList.remove('active');
            section.style.display = 'none'; // 新增显示控制
        });
        
        // 显示目标section
        const targetId = this.getAttribute('href').substring(1);
        const targetSection = document.getElementById(targetId);
        targetSection.style.display = 'block'; // 强制显示
        targetSection.classList.add('active');
        
        // 重置高度同步
        setTimeout(syncHeights, 50); // 延迟确保布局完成
    });
});

// 修改高度同步函数
function syncHeights() {
    const activeSection = document.querySelector('.section.active');
    if (!activeSection) return;
    
    const videoColumn = activeSection.querySelector('.video-column');
    if (!videoColumn) return;

    const videoHeight = videoColumn.offsetHeight;
    activeSection.querySelectorAll('.info-column').forEach(column => {
        column.style.height = `${videoHeight}px`;
    });
}

// 窗口变化时重新计算
window.addEventListener('resize', syncHeights);
document.addEventListener('DOMContentLoaded', syncHeights);

// 导航切换
document.querySelectorAll('.demo-title-box').forEach(box => {
    box.addEventListener('click', function() {
        document.querySelectorAll('.demo-title-box').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
    });
});

// 添加布局检测
function checkLayout() {
    const sidebarWidth = document.querySelector('.sidebar').offsetWidth;
    const mainContent = document.querySelector('.main-content');
    
    // 自动调整边距
    mainContent.style.marginLeft = `${sidebarWidth}px`;
    mainContent.style.width = `calc(100% - ${sidebarWidth}px)`;
    
    // 检测元素重叠
    const sidebarRect = document.querySelector('.sidebar').getBoundingClientRect();
    const mainRect = mainContent.getBoundingClientRect();
    
    if (sidebarRect.right > mainRect.left) {
        console.log('检测到布局重叠，正在调整...');
        mainContent.style.marginLeft = `${sidebarRect.width + 20}px`;
    }
}

// 初始化检测
window.addEventListener('load', checkLayout);
window.addEventListener('resize', checkLayout);

// 检查动态内容加载
function loadContent(docId) {
    const container = document.getElementById(docId); 
    // 确保插入到正确的容器
    if (docId === 'demos') {
        document.querySelector('#demos .content').innerHTML = getDocumentContent(docId);
    } else {
        // 其他内容加载逻辑
    }
}

// 添加动态参数展示
function animateParams() {
    document.querySelectorAll('.param-meter .meter-fill').forEach(meter => {
        const targetWidth = meter.style.width;
        meter.style.width = '0';
        setTimeout(() => {
            meter.style.width = targetWidth;
        }, 500);
    });

    document.querySelectorAll('.flow-phase').forEach(phase => {
        const targetHeight = phase.style.height;
        phase.style.height = '0';
        setTimeout(() => {
            phase.style.height = targetHeight;
        }, 800);
    });
}

// 视频加载后触发动画
document.querySelector('iframe').addEventListener('load', () => {
    setTimeout(animateParams, 1000);
});

// 添加进度条动画
function animateBars() {
    document.querySelectorAll('.param-bar').forEach(bar => {
        const targetWidth = bar.style.width;
        bar.style.width = '0';
        setTimeout(() => {
            bar.style.width = targetWidth;
        }, 500);
    });

    document.querySelectorAll('.level').forEach(level => {
        level.style.width = '0';
        setTimeout(() => {
            level.style.width = level.dataset.width;
        }, 800);
    });
}

// 视频加载完成后触发动画
document.querySelector('iframe').addEventListener('load', () => {
    setTimeout(animateBars, 1000);
});

// 添加动态交互
document.querySelectorAll('.design-card').forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.boxShadow = `0 8px 25px rgba(108,92,231,0.2)`;
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.boxShadow = 'none';
    });
});

// 初始化阶段数值
document.querySelectorAll('.stage').forEach((stage, index) => {
    const counts = [8, 15, 23, '30+'];
    stage.dataset.level = `Lv.${index + 1}`;
    stage.innerHTML = counts[index];
});

// 心流动画
function animateFlow() {
    document.querySelectorAll('.flow-phase').forEach((phase, i) => {
        const heights = [30, 50, 80, 100];
        phase.style.height = '0';
        setTimeout(() => {
            phase.style.height = `${heights[i]}%`;
        }, i * 200);
    });
}

document.addEventListener('DOMContentLoaded', animateFlow);

// 添加交互动画
document.querySelectorAll('.design-item').forEach(item => {
    item.addEventListener('mouseenter', function() {
        this.style.transform = 'translateX(10px)';
        this.style.opacity = '1';
    });
    
    item.addEventListener('mouseleave', function() {
        this.style.transform = 'translateX(0)';
        this.style.opacity = '0.9';
    });
});

// 初始化列表项动画
function animateListItems() {
    document.querySelectorAll('.design-item').forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        setTimeout(() => {
            item.style.transition = 'all 0.3s ease';
            item.style.opacity = '0.9';
            item.style.transform = 'translateX(0)';
        }, index * 100);
    });
}

document.addEventListener('DOMContentLoaded', animateListItems);

// 添加视频加载状态检测
document.querySelector('iframe').addEventListener('load', function() {
    this.style.opacity = 1;
    document.querySelector('.loading-indicator').style.display = 'none';
});

// 添加错误处理
document.querySelector('iframe').addEventListener('error', function() {
    document.querySelector('.loading-indicator').style.display = 'none';
    alert('视频加载失败，请检查网络连接');
});

// 添加链接点击事件
document.querySelector('.external-link').addEventListener('click', function(e) {
    e.preventDefault();
    const confirm = window.confirm('即将跳转到Bilibili观看完整视频');
    if (confirm) {
        window.open(this.href, '_blank');
    }
});

// 安全链接处理
document.querySelectorAll('.safe-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const confirmed = confirm('即将离开当前站点，是否继续？');
        if (confirmed) {
            window.open(this.href, '_blank', 'noopener,noreferrer');
        }
    });
});

// 点击事件测试
document.querySelector('[data-demo="time-shift"]').addEventListener('click', function() {
    console.log('时空穿梭按钮被点击');
});

// 使用MutationObserver确保元素存在
const observer = new MutationObserver(() => {
    const buttons = document.querySelectorAll('.switch-btn[data-demo="time-shift"]');
    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            const content = document.querySelector('.demo-content[data-demo="time-shift"]');
            if(content) {
                // 暴力显示方式
                content.style.display = 'block';
                content.style.opacity = '1';
                content.style.position = 'relative';
                content.style.zIndex = '999999';
            }
        }, {once: true}); // 防止重复绑定
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

// 完全重写事件绑定逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 使用事件委托监听整个文档
    document.documentElement.addEventListener('click', function(e) {
        const btn = e.target.closest('.switch-btn[data-demo]');
        if (btn) {
            // 暴力显示方式
            const content = document.querySelector(`.demo-content[data-demo="${btn.dataset.demo}"]`);
            if (content) {
                // 创建独立渲染层
                const layer = document.createElement('div');
                layer.style.cssText = `
                    position: fixed;
                    top: 50px;
                    left: 300px;
                    right: 20px;
                    bottom: 20px;
                    z-index: 2147483647;
                    background: white;
                    box-shadow: 0 0 30px rgba(0,0,0,0.3);
                    overflow: auto;
                    all: initial !important;
                `;
                
                // 克隆并插入内容
                const cloned = content.cloneNode(true);
                cloned.style.cssText = `
                    display: block !important;
                    opacity: 1 !important;
                    position: static !important;
                `;
                layer.appendChild(cloned);
                
                // 插入到body末尾
                document.body.appendChild(layer);
            }
        }
    }, true); // 使用捕获阶段确保触发
});

// 添加导航切换功能
document.querySelectorAll('nav a[href="#demos"]').forEach(link => {
    link.addEventListener('click', () => {
        document.querySelectorAll('.section').forEach(s => s.classList.add('hidden'));
        document.getElementById('demos').classList.remove('hidden');
    });
});

// 添加卡片点击事件
document.querySelectorAll('.demo-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const demoId = this.dataset.demo;
        // 这里可以添加打开详细页面的逻辑
        alert(`打开 ${demoId} 的详细页面`);
    });
}); 